---
title: React KBD (Keyboard) - Flowbite
description: Use the KBD component as an inline element to denote textual user input from the keyboard inside paragraphs, tables, and other components
---

The KBD (Keyboard) component can be used to indicate a textual user input from the keyboard inside other elements such as in text, tables, cards, and more.

Use the semantic `<Kbd>` keyboard input tag to use the default monospace font which is best suited for representing input keys.

To start using the `<Kbd>` component you need to import it from `flowbite-react`:

```jsx
import { Kbd } from "flowbite-react";
```

## Default KBD

Here's a list of KBD components that you can use inside any other element.

<Example name="kbd.root" />

## KBD inside text

Use this example by nesting an inline KBD component inside a paragraph.

<Example name="kbd.insideText" />

## KBD inside table

The KBD component can also be used inside table components to denote what type of key can be pressed for certain descriptions.

<Example name="kbd.insideTable" />

## Arrow keys

Use this example to show arrow keys inside the KBD styled element.

<Example name="kbd.arrowKeys" />

## Letter Keys

Use this example to show arrow keys inside the KBD styled element.

<Example name="kbd.letterKeys" />

## Number Keys

Use this example to show a key inside a KBD component from the english numeral system.

<Example name="kbd.numberKeys" />

## Function keys

This example can be used to denote function keys inside the KBD component.

<Example name="kbd.functionKeys" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<Theme name="kbd" />

## References

- [Flowbite Kbd](https://flowbite.com/docs/components/kbd/)
